<template>
    <div>
        <van-nav-bar left-arrow title="小组奖金" @click-left="onClickLeft">
            <template #right>
                <div class="title-link" @click="onClickRight">
                    <img src="@/assets/images/icon-edit.png" />
                    <span>申请奖金</span>
                </div>
            </template>
        </van-nav-bar>
        <div class="message-warning" v-if="time">
            <p>评价倒计时：</p>
            <van-count-down class="timespace" :time="time" format="DD天HH时mm分ss秒"> </van-count-down>
        </div>
        <div class="evaluation-filter">
            <span>选择月份</span>
            <div class="datePicker" :class="{ selected: showPicker }" @click="openPicker()">
                {{ filterdate.text }}
            </div>
        </div>
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="selectDate" value-key="text" />
        </van-popup>
        <div class="group-list">
            <div class="group-item" v-for="(item, index) in list" :key="index">
                <div class="group-top">
                    <div class="group-avatar">
                        <img :src="item.user.avatar" />
                    </div>
                    <div class="group-apply">
                        <h3>{{ item.addadmin }}的小组<span> （{{item.employeeNum}}人）</span></h3>
                        <span class="right-info">{{ item.timeText }}</span>
                    </div>
                </div>
                <div class="user-wages">
                    <table cellspacing="1">
                        <tr>
                            <th>本月开源节流的贡献</th>
                        </tr>
                        <tr>
                            <td>
                                <div v-html="item.achievement"></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="salary-td">
                                <strong>{{ item.month ? parseInt(item.month.split("-")[1]) : "" }}月申请的奖金：</strong>
                                <span class="blue">{{ item.bonus }}元</span>
                            </td>
                        </tr>
                        <tr v-if="item.userId !== user.id && item.alreadyReview">
                            <td class="salary-td">
                                <strong>我认为他们组该拿的奖金：</strong><span class="blue"> {{item.teamUserreviewList && item.teamUserreviewList.length>0 ? item.teamUserreviewList[0].bonus : 0}}元</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="group-bottom">
                    <div class="group-bottom-input" v-if="time !== 0 && item.userId !== user.id && !item.alreadyReview">
                        <span>我认为TA该拿的奖金：</span>
                        <van-field v-model="item.firstBonus" type="digit" maxlength="6" size="small" class="money-input" placeholder="0.00 元" />
                        <van-button size="small" type="primary" :loading="firstBtnLoading" @click="firstComment(item)">提交</van-button>
                    </div>
                    <router-link
                        v-if="item.userId === user.id || (item.userId !== user.id && item.alreadyReview) || nowDate !== filterdate.value"
                        class="detail-link"
                        :to="{
                            path: '/salaryGroupDetail',
                            query: { id: item.id},
                        }"
                        >查看详情&gt;&gt;</router-link
                    >
                </div>
            </div>
        </div>
        <van-tabbar v-model="active" class="tabbar" :before-change="changeTabbar">
            <van-tabbar-item @click="toTask()">
                <span>任务大厅</span>
                <template #icon>
                    <img src="@/assets/images/icon1.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/salary">
                <span>组员薪资</span>
                <template #icon>
                    <img src="@/assets/images/icon2.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>小组奖金</span>
                <template #icon>
                    <img src="@/assets/images/icon3x.png" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { Button, Icon, NavBar, Tabbar, TabbarItem, Picker, Popup, CountDown, Field, Toast, Notify, Dialog } from "vant";
import httpRequest from "@/util/httpRequest";
import { useStore } from "vuex";
import util from "@/util/baseUtil";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        [CountDown.name]: CountDown,
        [Field.name]: Field,
        [Dialog.name]: Dialog,
    },
    data() {
        return {
            store: useStore(),
            myteam: {},
            user: {},
            list: [],
            time: 0,
            showPicker: false,
            filterdate: {},
            columns: [],
            nowDate: util.DateFormat(new Date(), "yyyy-MM"),
            firstBtnLoading: false,
            secondBtnLoading: false,
            first: {},
            second: {},
            active: 2,
            isShow:false
        };
    },
    created() {
        httpRequest.get("userInfo", {}).then((res) => {
            this.user = res.data.userInfo;
        });
        httpRequest.post("getTeamId", {}).then((res) => {
            this.myteam = res.data;
            this.getList();
        });
        httpRequest.post("getMonthList", {}).then((res) => {
            this.columns = res.data.map((e) => {
                // const date = util.DateFormat(new Date(),"yyyy-MM");
                const text = e === this.nowDate ? e.replace("-", "年") + "月(本月)" : e.replace("-", "年") + "月";
                return { value: e, text };
            });
            this.filterdate = this.columns[0];
        });
        httpRequest.post("getRemainDuring", {}).then((res) => {
            this.time = res.data.teamremain === 0 ? 0 : res.data.teamremain * 1000;
        });
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {},
    methods: {
        toReward() {
            Toast("该功能暂未开放");
        },
        getList() {
            httpRequest.post("teamApplyBonusList", { teamId: this.myteam.groupId,month:this.filterdate.value }).then((res) => {
                this.list = res.data;
                this.list.forEach((e) => {
                    e.achievement = e.achievement.replace(/\n/g,'<br />');
                    e.timeText = e.addtime ? e.addtime.slice(0, 16) : "--";
                });
            });
        },
        selectDate(value) {
            this.filterdate = value;
            this.showPicker = false;
            this.getList();
        },
        openPicker() {
            this.showPicker = true;
        },
        onClickLeft() {
            const u = navigator.userAgent;
            const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
            const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isAndroid) {
                const NATIVE = window.NATIVE;
                if (NATIVE) {
                    //判断launcher对象是否存在
                    NATIVE.PAGE_CLOSE();
                } else {
                    alert("launcher not found!");
                }
            } else if (isiOS) {
                const KKJSBridge = window.KKJSBridge;
                KKJSBridge.call("EYJSModule", "pageClose", {}, function() {
                    console.log("closePage");
                });
            }
        },
        onClickRight() {
            httpRequest.post("isCanApplyTeamBonus", {}).then((res) => {
                if (res.resultCode === "000000") {
                    this.$router.push("/applyGroupSalary");
                } else {
                    Toast(res.data);
                    
                }
            });
            
        },
        getTimeText(time) {
            const now = new Date().getTime();
            const timer = new Date(time).getTime();
            let minutes = (now - timer) / 1000 / 60;
            if (minutes > 60) {
                minutes = minutes / 60;
                return parseInt(minutes + "") + "小时前";
            } else {
                return parseInt(minutes + "") + "分钟前";
            }
        },
        getEntryTimeText(time) {
            const now = new Date().getTime();
            const timer = new Date(time).getTime();
            let month = (now - timer) / 1000 / 60 / 60 / 24 / 30;
            if (month > 12) {
                month = month / 12;
                return parseInt(month + "") + "年";
            } else {
                month = month < 1 ? 1 : month;
                return parseInt(month + "") + "个月";
            }
        },
        firstComment(item) {
            this.first.bonus = item.firstBonus;
            this.first.teamApplyId = item.id;
            if (!this.first.bonus) {
                Notify({ type: "warning", message: "请填写我认为TA该拿的薪资" });
                return;
            }
            this.firstBtnLoading = true;
            httpRequest
                .post("everyoneReviewTeamBonus", this.first)
                .then((res) => {
                    if (res.resultCode === "000000") {
                        Toast({ message: "评价成功" });
                        this.getList();
                    } else {
                        Notify({ type: "warning", message: res.data });
                    }
                })
                .finally(() => {
                    this.firstBtnLoading = false;
                });
        },
        toTask() {
            // Toast("该功能暂未开放");
            this.$router.push("/");
        },
        changeTabbar() {
            return false;
        },
    },
};
</script>

<style lang="less" scoped>
.title-link {
    display: flex;
    align-items: center;
    img {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    span {
        font-size: 28px;
        color: #288ef4;
        line-height: 1;
    }
}

.evaluation-wish {
    height: 64px;
    line-height: 64px;
    background: #fff3ea;
    border-radius: 8px;
    color: #fe7b07;
    font-size: 26px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    span {
        margin: 0 20px;
    }
}
.message-warning {
    color: #ec615c;
    background: #ffeeec;
    height: 70px;
    line-height: 70px;
    margin: 0;
    display: flex;
    padding: 0 30px;
    justify-content: center;
    p {
        margin: 0;
        font-size: 26px;
    }
    .timespace {
        color: #e02020;
        display: flex;
        align-items: center;
        font-size: 28px;
        margin-left: 15px;
    }
}

.group-list {
    margin-bottom: 140px;
    .group-item {
        margin-top: 20px;
        background: #fff;
        padding: 0px 20px;
        position: relative;
        .seal {
            position: absolute;
            right: 20px;
            top: 10px;
            width: 125px;
        }
        .group-top {
            padding: 34px 0;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            align-items: center;
            .group-avatar {
                width: 80px;
                height: 80px;
                flex-shrink: 0;
                margin-right: 20px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                }
            }
            .group-apply {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-grow: 1;
            }
        }
        .user-wages{
            text-align: left;
            th{
                padding:0 20px;
                font-size: 28px;
                color: #000;
                font-weight: bold;
            }
            td{
                padding:20px;
            }
        }
        .group-bottom {
            padding: 20px 0;
            border-top: 1px solid #f1f1f1;
            &-input {
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                    font-size: 26px;
                    color: #000;
                    white-space: nowrap;
                    flex: 1 0 auto;
                }
                button {
                    width: 120px;
                    flex: 1 0 auto;
                    font-size: 28px;
                    &.disabled{
                        color: #c1c1c1;
                        background: #F2F2F2;
                        border-color: #f2f2f2;
                    }
                }
                .money-input {
                    border: 1px solid #e8e8e8;
                    border-radius: 8px;
                    flex: 0 1 auto;
                    margin: 0 10px;
                    box-sizing: border-box;
                    padding: 8px 20px;
                    &.disabled{
                        border-color: #E8E8E8;
                        background: #f8f8f8;
                        color: #CCCCCC;
                    }
                }
            }
            .detail-link {
                color: #576b95;
                font-size: 28px;
                display: inline-block;
                margin: 10px 0;
            }
        }
    }
}
</style>
